<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import { ref, defineProps, onMounted, onUnmounted, inject, shallowRef, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";

const props = defineProps({
  housingSupplyStatsData: {
    type: Array,
    default: () => [],
  },
});

const data = ref();
data.value = props.housingSupplyStatsData;

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject("echarts");

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "25%",
        containLabel: true,
      },
      legend: {
        x: "center",
        top: "10%",
        itemWidth: pxToRem(10),
        itemHeight: pxToRem(10),
        textStyle: {
          color: "white",
          fontSize: pxToRem(12),
        },
        itemGap: pxToRem(30),
        icon: "rect",
        data: [
          {
            name: "已出租",
            itemStyle: {
              color: "#0E81FF",
            },
          },
          {
            name: "未出租",
            itemStyle: {
              color: "#5ABE52",
            },
          },
        ],
      },
      xAxis: {
        name: "面积（m²）",
        axisLabel: {
          fontSize: pxToRem(9),
          color: "white",
        },
        nameLocation: "center",
        nameGap: pxToRem(-20), // 设置名称与轴线之间的距离
        nameTextStyle: {
          padding: [0, 0, 0, pxToRem(470)],
          fontSize: pxToRem(12),
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        name: "月租金（元）",
        scale: true,
        nameTextStyle: {
          fontSize: pxToRem(12),
        },
        textStyle: {
          fontSize: pxToRem(9),
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontSize: pxToRem(9),
          color: "white",
          fontWeight: "lighter",
        },
      },
      tooltip: {
        // trigger: 'axis',
        showDelay: 0,
        formatter: function (params) {
          if (params.value.length > 1) {
            return params.seriesName + " :<br/>" + params.value[0] + "元" + params.value[1] + "㎡";
          }
        },
        axisPointer: {
          show: true,
          type: "cross",
          lineStyle: {
            type: "dashed",
            width: 1,
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(18),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      series: [
        {
          name: "已出租",
          type: "scatter",
          symbolSize: pxToRem(5),
          data: data.value[0],
          markArea: {
            data: [
              [
                {
                  coord: ["min", "min"],
                },
                {
                  coord: ["max", "max"],
                },
              ],
            ],
            silent: true,
            itemStyle: {
              color: "transparent",
              borderWidth: 1,
              borderType: "dashed",
            },
          },
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            lineStyle: {
              type: "solid",
            },
            label: {
              fontSize: 10, // 设置文字大小为14px
              color: "#fff",
            },
            data: [{ type: "average", name: "中位数" }, { xAxis: 6 }],
          },
        },
        {
          name: "未出租",
          type: "scatter",
          symbolSize: pxToRem(5),
          data: data.value[1],
          markArea: {
            data: [
              [
                {
                  coord: ["min", "min"],
                },
                {
                  coord: ["max", "max"],
                },
              ],
            ],
            silent: true,
            itemStyle: {
              color: "transparent",
              borderWidth: 1,
              borderType: "dashed",
            },
          },
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            lineStyle: {
              type: "solid",
            },
            label: {
              fontSize: 10, // 设置文字大小为14px
              color: "#fff",
            },
            data: [{ type: "average", name: "中位数" }, { xAxis: 3 }],
          },
        },
      ],
    };
    option && myChart.value.setOption(option, true);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  data.value = props.housingSupplyStatsData;
  initEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>

<style scoped lang="less"></style>
